<template>
    <div class="production-plan">
      <el-button type="success" @click="addjihau" class="save-button">保存主表单和明细</el-button>
      <h3 class="title">包装成品完工</h3>
  
      <!-- 基本信息 -->
      <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="120px" class="form-container">
        <el-row :gutter="30">
          <!-- 第一行 -->
          <el-col :span="8">
            <el-form-item label="产品名称">
              <el-input 
                placeholder="请输入" 
                v-model="formData.product_name" 
                required
              >
                <template #suffix>
                  <el-button size="mini" @click="openAssociatedItemDialog1">
                    <i class="el-icon-search"></i>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品型号" style="margin-bottom: 20px;">
              <el-input v-model="formData.product_model" placeholder="请输入产品型号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品规格" style="margin-bottom: 20px;">
              <el-input v-model="formData.product_specification" placeholder="请输入产品规格" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装类型" style="margin-bottom: 20px;">
              <el-select
                v-model="formData.packaging_type"
                placeholder="请选择包装类型"
                style="width: 100%;"
                :filterable="true"
                :clearable="true"
              >
                <el-option
                  v-for="item in workOrderTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装规格" style="margin-bottom: 20px;">
              <el-input v-model="formData.packaging_specification" placeholder="请输入包装规格" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装数量" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.packaging_quantity" placeholder="请输入包装数量" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装方式" style="margin-bottom: 20px;">
              <el-select
                v-model="formData.packaging_method"
                placeholder="请选择包装方式"
                style="width: 100%;"
                :filterable="true"
                :clearable="true"
              >
                <el-option
                  v-for="item in workOrderTypeOptions2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产批次" style="margin-bottom: 20px;">
              <el-input v-model="formData.production_batch" placeholder="请输入生产批次" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="生产日期" prop="transactionTime" style="margin-bottom: 20px;">
              <el-date-picker
                v-model="formData.production_date"
                type="date"
                required
                placeholder="请选择生产日期"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="生产车间">
            <el-input 
              placeholder="请输入" 
              v-model="formData.production_workshop" 
              required
            >
              <template #suffix>
                <el-button size="mini" @click="openAssociatedItemDialog">
                  <i class="el-icon-search"></i>
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
          <el-col :span="8">
            <el-form-item label="生产线" style="margin-bottom: 20px;">
              <el-input v-model="formData.production_line" placeholder="请输入生产线" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检验状态" style="margin-bottom: 20px;">
              <el-input v-model="formData.inspection_status" placeholder="请输入检验状态" />
            </el-form-item>
          </el-col>
          <!-- 第四行 -->
          <el-col :span="8">
            <el-form-item label="检验报告编号" style="margin-bottom: 20px;">
              <el-input v-model="formData.inspection_report_number" placeholder="请填写检验报告编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="质量标准" style="margin-bottom: 20px;">
              <el-input v-model="formData.quality_standard" placeholder="请填写质量标准" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品标签" style="margin-bottom: 20px;">
              <el-input v-model="formData.product_label" placeholder="请填写产品标签" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="条形码" style="margin-bottom: 20px;">
              <el-input v-model="formData.barcode" placeholder="请填写条形码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="二维码" style="margin-bottom: 20px;">
              <el-input v-model="formData.qr_code" placeholder="请填写二维码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成品数量" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.finished_product_quantity" placeholder="请输入成品数量" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合格数量" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.qualified_quantity" placeholder="请输入合格数量" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="不良品数量" style="margin-bottom: 20px;">
              <el-input-number v-model="formData.defective_quantity" placeholder="请输入不良品数量" :min="0" :step="1" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="包装人员" style="margin-bottom: 20px;">
              <el-input v-model="formData.packaging_staff" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检验人员" style="margin-bottom: 20px;">
              <el-input v-model="formData.inspection_staff" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管理人员" style="margin-bottom: 20px;">
              <el-input v-model="formData.management_staff" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" style="margin-bottom: 20px;">
              <el-input v-model="formData.remarks" type="textarea" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单编号" style="margin-bottom: 20px;">
              <el-input v-model="formData.order_number" placeholder="请填写" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  
  
       <!--工厂选择对话框 -->
      <el-dialog
        v-model="associatedItemDialogVisible"
        width="500px"
        title="车间选择"
        append-to-body
      >
        <el-table
          :data="associatedItems"
          highlight-current-row
          border
          size="small"
          @current-change="handleAssociatedItemChange"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column property="teamNumber" label="业务单号" />
          <el-table-column property="factory" label="工厂" />
          <el-table-column property="workshop" label="车间" />
          <el-table-column property="department" label="部门" />
          <el-table-column type="productionLine" label="产线" />
          <el-table-column property="teams" label="班组" />
          <el-table-column property="shift" label="班次" />
          <el-table-column property="state" label="状态" />
          <el-table-column property="date" label="日期" />
          <el-table-column type="recorders" label="记录人" />
          <el-table-column property="shiftleader" label="交班班长" />
          <el-table-column property="successionMonitor" label="接班班长" />
        </el-table>
        <template #footer>
          <el-button @click="pickAssociatedItem">确定</el-button>
        </template>
      </el-dialog>

      <el-dialog
        v-model="associatedItemDialogVisible1"
        width="500px"
        title="产品信息选择"
        append-to-body
      >
        <el-table
          :data="associatedItems1"
          highlight-current-row
          border
          size="small"
          @current-change="handleAssociatedItemChange1"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column property="productName" label="产品名称" />
          <el-table-column property="brand" label="生产批次" />
          <el-table-column property="materialName" label="品牌" />
          <el-table-column property="packingSpecifications" label="材料名称" />
          <el-table-column property="packingDate" label="包装日期" />
          <el-table-column property="packingPlan" label="包装计划" />
          <el-table-column property="packers" label="包装人员" />
          <el-table-column property="qualityInspectors" label="质检人员" />
          <el-table-column property="id" label="设备表" />
          <el-table-column property="testResults" label="外观检验结果" />
          <el-table-column property="inkjetEffect" label="喷码/压码效果" />
          <el-table-column property="tightness" label="密封性" />
          <el-table-column property="compliance" label="操作合规性" />
          <el-table-column property="abnormal" label="异常原因分析结果" />
          <el-table-column property="reviewers" label="审核人" />
          <el-table-column property="auditDate" label="审核日期" />
        </el-table>
        <template #footer>
          <el-button @click="pickAssociatedItem1">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useRouter, useRoute } from 'vue-router';
  import { Materialread, Materialwrite } from '@/axios/axiosHelper';
  import axios from 'axios';
  import { th } from 'element-plus/es/locales.mjs';
  
  const formRef = ref(null);
  const currentUser = ref("admin");
  const router = useRouter();
  const route = useRoute();
  
  // 主表单数据
  const formData = reactive({
        "id": 0,
        "product_name": "",
        "product_model": "",
        "product_specification": "",
        "packaging_type": "",
        "packaging_specification": "",
        "packaging_quantity": 0,
        "packaging_method": "",
        "production_batch": "",
        "production_date": "",
        "production_workshop": "",
        "production_line": "",
        "inspection_status": "",
        "inspection_report_number": "",
        "quality_standard": "",
        "product_label": "",
        "barcode": "",
        "qr_code": "",
        "finished_product_quantity": 0,
        "qualified_quantity": 0,
        "defective_quantity": 0,
        "packaging_staff": "",
        "inspection_staff": "",
        "management_staff": "",
        "remarks": "",
        "order_number": "",
        "isDel": false

  });
  
  // 主表单验证规则
  const rules = reactive({
    bomSubject: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ],
    productName: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ],
    documentNo: [
      { required: true, message: '不能为空', trigger: 'blur' }
    ],
  });
  
  // 明细数据列表
  const planDetailsList = ref([]);
  const attachments = ref([]);
  
  // 保存主表单
  const addjihau = () => {
    axios.post('http://localhost:5293/api/CompletedStorage/AddCompletedfinished', formData)
      .then(response => {
        if (response.data.code === 200) {
          ElMessage.success('完工入库保存成功');
          console.log(response.data.data);
          router.push("/GetCompletedfinished");
        } else {
          ElMessage.error(`完工入库保存失败：${response.data.message}`);
        }
      })
  };
  //包装类型
  const workOrderTypeOptions = ref([
    { value: '玻璃瓶', label: '玻璃瓶' },
    { value: '易拉罐', label: '易拉罐' },
    { value: '塑料袋', label: '塑料袋' },
    { value: '纸袋', label: '纸袋' },
    { value: '布袋', label: '布袋' },
    { value: '发酵工单', label: '发酵工单' },
    { value: '酵母工单', label: '酵母工单' },
  ]);
  //包装方式
  const workOrderTypeOptions2 = ref([
    { value: '瓶装', label: '瓶装' },
    { value: '罐装', label: '罐装' },
    { value: '桶装', label: '桶装' },
    { value: '听装', label: '听装' },
    { value: '袋装', label: '袋装' }
  ]);
  //货位
  const workOrderTypeOptions3 = ref([
    { value: 'BZ2', label: 'BZ2' },
    { value: 'SZ03', label: 'SZ03' },
    { value: 'ZZG05', label: 'ZZG05' },
    { value: 'GLL03', label: 'GLL03' },
    { value: 'LXN01', label: 'LXN01' }
  ]);
  //单位
  const workOrderTypeOptions4 = ref([
    { value: '升', label: '升' },
    { value: '毫升', label: '毫升' },
    { value: '千升', label: '千升' },
    { value: '吨', label: '吨' },
    { value: '千克', label: '千克' },
    { value: '克', label: '克' },
    { value: '瓶', label: '瓶' },
    { value: '罐', label: '罐' },
    { value: '袋', label: '袋' },
    { value: '盒', label: '盒' },
    { value: '箱', label: '箱' },
    { value: '个', label: '个' },
    { value: '件', label: '件' },
    { value: '桶', label: '桶' },
  ]);
  // —————————————————————————————————————————— 车间 ——————————————————————————————————————————————
  // 对话框显示状态
  const associatedItemDialogVisible = ref(false);
  const currentAssociatedItem = ref({});
  // 关联项目数据
  const associatedItems = ref([]);
  // 打开关联项目选择对话框
  const openAssociatedItemDialog = () => {
    associatedItemDialogVisible.value = true;
  };
  // 当前选中的关联项目行
  const handleAssociatedItemChange = (val) => {
    currentAssociatedItem.value = val;
  };
  // 选择关联项目
  const pickAssociatedItem = () => {
    if (currentAssociatedItem.value) {
      formData.production_workshop = currentAssociatedItem.value.factory; // 工厂
  
      formData.production_line = currentAssociatedItem.value.productionLine; // 产线
      formData.team = currentAssociatedItem.value.teams; // 班组
      formData.shift = currentAssociatedItem.value.shift; // 班次
      formData.order_number = currentAssociatedItem.value.teamNumber; //  班次
      formData.inspection_status = currentAssociatedItem.value.state; //检验状态
      associatedItemDialogVisible.value = false;
    }
  };
  // 获取关联项目数据
  const fetchAssociatedProjects = () => {
    axios.get("http://localhost:5118/api/Team/ShowTeam")
      .then(res => {
        associatedItems.value = res.data.data;
  
      })
  };
    // —————————————————————————————————————————— 产品名称 ——————————————————————————————————————————————
  
  onMounted(() => {
  fetchAssociatedProjects();
  fetchAssociatedProjects1();
  });
  
  

  
   // 对话框显示状态
   const associatedItemDialogVisible1 = ref(false);
  const currentAssociatedItem1 = ref({});
  // 关联项目数据
  const associatedItems1 = ref([]);
  // 打开关联项目选择对话框
  const openAssociatedItemDialog1= () => {
    associatedItemDialogVisible1.value = true;
  };
  // 当前选中的关联项目行
  const handleAssociatedItemChange1 = (val) => {
    currentAssociatedItem1.value = val;
  };
  // 选择关联项目
  const pickAssociatedItem1 = () => {
    if (currentAssociatedItem1.value) {
      
      formData.product_name = currentAssociatedItem1.value.productName; // 产品名称
      formData.product_model = currentAssociatedItem1.value.materialName; // 生产批次
      formData.production_batch = currentAssociatedItem1.value.brand; // 生产批次
      formData.product_specification = currentAssociatedItem1.value.packingSpecifications; //包装规格
      formData.packaging_specification = currentAssociatedItem1.value.packingSpecifications; //包装规格
      formData.production_date = currentAssociatedItem1.value.packingDate; // 包装日期
      formData.qualified_quantity = currentAssociatedItem1.value.PackingPlan; // 计划包装数量
      formData.packaging_staff = currentAssociatedItem1.value.packers; // 包装人员
      formData.inspection_staff = currentAssociatedItem1.value.qualityInspectors; // 质检人员
      formData.management_staff = currentAssociatedItem1.value.reviewers; // 审核人


  
      associatedItemDialogVisible1.value = false;
    }
  };
  // 获取关联项目数据
  const fetchAssociatedProjects1 = () => {
    axios.get("http://localhost:5118/api/Monitor/GetMonito")
      .then(res => {
        associatedItems1.value = res.data.data;
  
      })
  };
  
  
  
  
  
  
  
  
  </script>
  
  <style scoped>
  .production-plan {
    padding: 30px;
    background-color: #f0f2f5;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
  }
  
  .title {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
  }
  
  .save-button {
    display: block;
    margin: 0 auto 30px;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .form-container {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
  
  .el-form-item__label {
    color: #34495e;
    font-size: 16px;
    font-weight: 500;
  }
  
  .el-input,
  .el-input-number,
  .el-date-picker {
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  .el-input:focus,
  .el-input-number:focus,
  .el-date-picker:focus {
    border-color: #42b983;
    outline: none;
    box-shadow: 0 0 5px rgba(66, 185, 131, 0.2);
  }
  </style>